<ion-header class="bp-header">
  <ion-navbar>
    <ion-title>
      <div [reveal-at-scroll-pos]="expandableHeader.headerHeight" [scrollArea]="scrollArea">
        {{ 'Wallets' | translate }}
      </div>
    </ion-title>
    <ion-buttons right class="settings-button" *ngIf="walletsGroups && walletsGroups[0]">
      <button class="option-button disable-hover" (click)="showMoreOptions()" ion-button icon-only>
        <ion-icon name="ios-more" md="ios-more"></ion-icon>
      </button>
      <button ion-button clear icon-only color="grey" *ngIf="txpsN > 0" (click)="openProposalsNotificationsPage()">
        <ion-badge class="notifications-badge">{{ txpsN }}</ion-badge>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content #scrollArea>
  <ion-refresher (ionRefresh)="doRefresh($event)" pullMin="90" pullMax="160">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <div class="wrapper">
    <expandable-header [scrollArea]="scrollArea" [fadeFactor]="5" [disableFade]="true" #expandableHeader>
      <ion-toolbar class="wide-header__title">
        <expandable-header-primary>
          {{ 'Wallets' | translate }}
        </expandable-header-primary>
      </ion-toolbar>
    </expandable-header>

    <create-new-wallet *ngIf="!walletsGroups || !walletsGroups[0]"></create-new-wallet>

    <div *ngFor="let walletGroup of walletsGroups; let i = index" class="wallets-container">
      <div class="section-header" *ngIf="walletGroup[0].canSign && walletsGroups.length > 1">
        <ion-icon class="item-img" item-start>
          <img src="assets/img/settings-icons/icon-key.svg" width="15" />
        </ion-icon>
        <ion-label class="key-name">
          <span>{{ profileProvider.getWalletGroup(walletGroup[0].keyId).name }}</span>
        </ion-label>
        <div class="collapse">
          <div *ngIf="!walletGroup[0].canAddNewAccount" class="legacy-tag">Legacy</div>
          <div *ngIf="walletGroup[0].canAddNewAccount" (click)="addWallet(walletGroup[0].keyId)">
            <ion-icon class="item-img">
              <img src="assets/img/plus-gray.svg" width="15" />
            </ion-icon>
          </div>
          <div class="collapse-btn" *ngIf="walletsGroups.length > 1" (click)="collapseGroup(walletGroup[0].keyId)">
            <ion-icon *ngIf="!isCollapsed(walletGroup[0].keyId)" name="ios-arrow-down"></ion-icon>
            <ion-icon *ngIf="isCollapsed(walletGroup[0].keyId)" name="ios-arrow-up"></ion-icon>
          </div>
        </div>
      </div>
      <div class="section-header" *ngIf="walletGroup[0].keyId == 'read-only'">
        <ion-icon class="item-img" item-start>
          <img src="assets/img/settings-icons/icon-read-only.svg" width="20" />
        </ion-icon>
        <ion-label class="key-name">
          <span translate>Read Only Wallets</span>
        </ion-label>
      </div>
      <ion-list no-lines class="bp-list" [ngClass]="{ collapsed: isCollapsed(walletGroup[0].keyId) }">
        <wallet-item-content *ngFor="let wallet of walletGroup" [useFadeEffect]="useImgFadeEffect" [wallet]="wallet" (click)="goToWalletDetails(wallet)"></wallet-item-content>
      </ion-list>
      <label-tip type="warn" *ngIf="walletGroup && walletGroup[0] && walletGroup[0].needsBackup" header="no-header" margin-top>
        <div label-tip-body>
          <span translate>Before retrieving your wallets addresses, it's recommended that you first write down your recovery phrase and store it securely so that your wallets can be recovered in the case your device was lost or stolen.</span>
          <br>
          <a class="label-tip-link" (click)="openBackupPage(walletGroup[0].keyId)" translate>Backup now</a>
        </div>
      </label-tip>
    </div>

    <div *ngIf="showCoinbase && coinbaseLinked">
      <div class="section-header">
        <ion-icon class="item-img" item-start>
          <img src="assets/img/coinbase/coinbase-icon.png" width="20" />
        </ion-icon>
        <ion-label class="key-name">
          <span *ngIf="!coinbaseData?.user">...</span>
          <span *ngIf="coinbaseData?.user">{{ coinbaseData.user.name }}'s Coinbase Account</span>
        </ion-label>
        <div class="collapse">
          <div class="collapse-btn" *ngIf="coinbaseData?.accounts.length > 1" (click)="collapsedAccounts = !collapsedAccounts">
            <ion-icon *ngIf="!collapsedAccounts" name="ios-arrow-down"></ion-icon>
            <ion-icon *ngIf="collapsedAccounts" name="ios-arrow-up"></ion-icon>
          </div>
        </div>
      </div>
      <div *ngIf="!coinbaseData?.accounts" translate>Loading accounts...</div>
      <div *ngFor="let ac of coinbaseData?.accounts">
        <ion-list no-lines class="bp-list" [hidden]="collapsedAccounts">
          <button ion-item detail-none (click)="goToCoinbaseAccount(ac.id)">
            <coin-icon [coin]="ac.currency.code.toLowerCase()" [network]="livenet" item-left></coin-icon>
            <ion-label>
              {{ac.name}}
            </ion-label>
            <ion-note item-end>
              <div class="main-note">{{ac.balance.amount | number:'1.2-8'}}</div>
              <div class="secondary-note" *ngIf="getNativeBalance(ac.balance.amount, ac.balance.currency)">
                {{ getNativeBalance(ac.balance.amount, ac.balance.currency) | currency:' ':' ' }} {{ coinbaseData.user.native_currency }}
              </div>
            </ion-note>
          </button>
        </ion-list>
      </div>
    </div>
  </div>
</ion-content>
